<template>
  <u-popup :show="authShow" :round="10">
    <view class="phone">
      <view class="phone-ctt">
        <u-icon name="phone" size="26"> </u-icon>
        授权手机号, 使用更完整的服务
      </view>
      <view class="footer">
        <view class="footer-text">
          <u-button type="warn" text="取消" open-type="getPhoneNumber" @click="cancel"></u-button>
        </view>
        <view class="footer-text">
          <u-button type="primary" text="授权" open-type="getPhoneNumber" @getphonenumber="phoneSubmit"></u-button>
        </view>
      </view>
    </view>
  </u-popup>
</template>
 
<script>
import { mapGetters, mapMutations } from "vuex";
import { phoneLogin } from "@/sheep/api/login";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["authShow", "userId"]),
  },
  methods: {
    ...mapMutations({
      setAuth: "user/setAuth",
      setToken: "user/setToken",
    }),
    async phoneSubmit(e) {
      let loginBody = {
        xcxCode: uni.getStorageSync("wxcode"),
        phoneCode: e.detail.code,
        clientId: "be7052a7e4f802c20df10a8d131adb12",
        grantType: "xcxBind",
        tenantId: "000000",
        superiorId: uni.getStorageSync("bindAgentId")
          ? uni.getStorageSync("bindAgentId")
          : "",
      };
      phoneLogin(loginBody).then((res) => {
        if (res.code === 200) {
          this.setToken(res.data);
          uni.removeStorageSync("bindAgentId");
          this.cancel();
          const pages = getCurrentPages();
          const currentPage = pages[pages.length - 1].route;
          uni.reLaunch({
            url: "/" + currentPage,
          });
        }
      });
    },
    cancel() {
      this.setAuth(false);
    },
  },
};
</script>
 
<style scoped lang="scss">
.phone {
  padding: 36rpx 50rpx 48rpx;
  .phone-icon {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .phone-ctt {
    display: flex;
    justify-content: center;
    font-size: 30rpx;
    line-height: 1.6;
    margin: 28rpx 0 36rpx;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .footer-text {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #999999;
      &:last-child {
        color: #101010;
      }
    }
  }
}

/deep/ .u-button--info.data-v-3bf2dba7 {
  border-style: none !important;
}
</style>